<template>
  <div class="count">
    <div>name:{{ talkStore.name }}</div>
    <button @click="setName">改变name</button>
    <button @click="getTalk">获取一句话</button>
    <ul>
      <li v-for="item in talkStore.talkList" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useTalkStore } from '@/stores/talk'

const talkStore = useTalkStore()

// 监听方式一：
talkStore.$subscribe((mutation, state) => {
  console.log('talkStore 里面的数据发生了变化')
  console.log(mutation, state)
})

// 监听方式二：
// watch(talkStore.talkList, (newValue, oldValue) => {
//   console.log('talkStore.talkList 里面的数据发生了变化')
//   console.log(newValue, oldValue)
// })


let id = 2
const getTalk = () => {
  id += 1
  let result = { id, title: `这是第${id}条数据` }

  talkStore.talkList.unshift(result)
}
const setName = () => {
  talkStore.name = 'kunkun'
}


</script>

<style lang="scss" scoped>
.count {
  background-color: #68e168;
  margin-top: 20px;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 10px;

  select,
  button {
    padding: 5px 10px;
    margin: 0 5px;
    height: 30px;
  }
}
</style>
